<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="1300px"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-tabs v-model="active" @tab-click="tabChange">
      <el-tab-pane label="基础信息" name="basic">
        <el-form ref="nodeBasic" :model="node" label-width="200px" :rules="rules">
          <el-form-item label="节点编号">
            {{ source.NodeCode }}
          </el-form-item>
          <el-form-item label="节点名称" prop="NodeName">
            <el-input v-model="node.NodeName" :readonly="readonly" placeholder="节点名称" clearable />
          </el-form-item>
          <el-form-item label="审批按钮" prop="buttons">
            <enumItem
              v-model="node.buttons"
              :readonly="readonly"
              :dic-key="EnumDic.AuditButton"
              placeholder="审批按钮"
              :filters="[0,8,256,512]"
              :multiple="true"
              mode="button"
              sys-head="flow"
            />
          </el-form-item>
          <el-form-item label="审核功能开关" prop="FuncList">
            <el-checkbox-group v-model="node.FuncList" :disabled="readonly">
              <el-checkbox-button v-for="i in auditFunc" :key="i.key" :label="i.key">{{ i.label }}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="审核限制时间" prop="LimitTime">
            <el-input-number v-model="node.LimitTime" :disabled="readonly" placeholder="审核限制时间" clearable />
            <span style="padding-left: 10px;">分钟</span>
          </el-form-item>
          <el-form-item v-if="node.LimitTime !=null && node.LimitTime !== 0" label="超时处理方式" prop="TimeOutOpt">
            <enumItem
              v-model="node.TimeOutOpt"
              :readonly="readonly"
              :dic-key="EnumDic.FlowTimeOutOpt"
              placeholder="超时处理方式"
              :filters="[0]"
              sys-head="flow"
            />
          </el-form-item>
          <el-form-item v-if="node.TimeOutOpt >= 4" :label="timeOutOpt[node.TimeOutOpt]" prop="ToEmpId">
            <empInput v-model="node.ToEmpId" :clearable="true" :placeholder="'选择'+timeOutOpt[node.TimeOutOpt]" />
          </el-form-item>
          <el-form-item label="进度值" prop="ProgressVal">
            <el-input-number
              v-model="node.ProgressVal"
              :min="0"
              :max="100"
              :step="1"
              :disabled="readonly"
              placeholder="进度值"
            />
          </el-form-item>
          <el-form-item v-if="node.buttons && node.buttons.includes(64)" label="回退的节点" prop="BackNodeId">
            <el-select
              v-model="node.BackNodeId"
              :disabled="readonly"
              placeholder="回退的节点"
              :clearable="true"
            >
              <el-option v-for="t in backNodes" :key="t.Id" :label="t.NodeName" :value="t.Id" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="node.buttons && node.buttons.includes(64)" label="回退的处理方式" prop="BackMethod">
            <enumItem
              v-model="node.BackMethod"
              :readonly="readonly"
              :dic-key="EnumDic.FlowBackMethod"
              placeholder="回退的处理方式"
              sys-head="flow"
            />
          </el-form-item>
          <el-form-item label="消息通知范围" prop="NoticeRange">
            <enumItem
              v-model="node.NoticeRange"
              :readonly="readonly"
              :dic-key="EnumDic.FlowMsgNoticeRange"
              placeholder="消息通知范围"
              sys-head="flow"
            />
          </el-form-item>
          <el-form-item label="审批说明" prop="Show">
            <el-input v-model="node.Show" :readonly="readonly" placeholder="审批说明" maxlength="100" clearable />
          </el-form-item>
        </el-form>
        <div v-if="readonly == false" style="text-align: center">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="出入策略" name="intoOut">
        <intoOutEdit :def-form-id="defFormId" :source="source" :readonly="readonly" :flow-id="flowId" :node-id="nodeId" :isload="active=='intoOut'" />
      </el-tab-pane>
      <el-tab-pane label="表单配置" name="formEdit">
        <nodeFormEdit :readonly="readonly" :def-form-id="defFormId" :source="source" :flow-id="flowId" :node-id="nodeId" :is-load="active=='formEdit'" @refresh="saveForm" />
      </el-tab-pane>
      <el-tab-pane label="表单权限" name="formPower">
        <nodeFormPower :readonly="readonly" :flow-id="flowId" :form-id="curFormId" :is-allow-edit="source.IsAllowEdit" :node-id="nodeId" :is-load="active=='formPower'" />
      </el-tab-pane>
      <el-tab-pane label="审批人" name="auditActor">
        <whileAuditActor :flow-id="flowId" :readonly="readonly" :node-id="nodeId" :show.sync="show" :is-load="active=='auditActor'" @change="actorIsRefresh=true" />
      </el-tab-pane>
      <el-tab-pane label="审批事件" name="nodeEv">
        <nodeEventEdit :filter-event="fliterEvents" :readonly="readonly" :flow-id="flowId" :node-id="nodeId" :node-event="source.NodeEvent" :is-load="active=='nodeEv'" />
      </el-tab-pane>
      <el-tab-pane label="抄送配置" name="auditMsg">
        <auditMsgEdit :flow-id="flowId" :readonly="readonly" :node-id="nodeId" :nodes="backNodes" :is-load="active=='auditMsg'" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { EnumDic, AuditButton } from '@/flow/config/flowConfig'
import * as flowNodeApi from '@/flow/api/flowNode'
import intoOutEdit from './intoOutEdit.vue'
import auditMsgEdit from './auditMsgEdit.vue'
import nodeEventEdit from './nodeEventEdit.vue'
import whileAuditActor from './whileAuditActor.vue'
import nodeFormEdit from './nodeFormEdit.vue'
import nodeFormPower from './nodeFormPower.vue'
import empInput from '@/components/emp/empInput.vue'
export default {
  components: {
    auditMsgEdit,
    intoOutEdit,
    nodeEventEdit,
    whileAuditActor,
    nodeFormEdit,
    nodeFormPower,
    empInput
  },
  props: {
    nodeId: {
      type: String,
      default: null
    },
    defFormId: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    readonly: {
      type: Boolean,
      default: false
    },
    auditType: {
      type: Number,
      default: null
    },
    nodes: {
      type: Array,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      EnumDic,
      active: 'basic',
      show: null,
      curFormId: null,
      source: {},
      title: null,
      node: {},
      isRefresh: false,
      actorIsRefresh: false,
      backNodes: [],
      auditFunc: [{
        key: 'OpinionMust',
        label: '审批意见必填'
      }, {
        key: 'IsSign',
        label: '需手写签名'
      }, {
        key: 'IsUpFile',
        label: '允许上传附件'
      }, {
        key: 'IsUpFileSign',
        label: '对上传附件签名'
      }, {
        key: 'IsAllowCancel',
        label: '允许撤回'
      }],
      rules: {
        NodeName: [
          {
            required: true,
            message: '节点名称不能为空！',
            trigger: 'blur'
          }
        ],
        AuditButton: [
          {
            required: true,
            message: '审批按钮不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val && this.nodeId != null) {
          this.reset()
        }
      },
      immediate: true
    },
    defFormId: {
      handler(val) {
        if (val && this.source.FormId == null) {
          this.curFormId = val
        }
      },
      immediate: false
    },
    nodeId: {
      handler(val) {
        if (val && this.visible) {
          this.reset()
        }
      },
      immediate: false
    },
    nodes: {
      handler(val) {
        if (val) {
          this.backNodes = val.filter(c => c.NodeType !== 0 && c.NodeType !== 3)
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    saveForm(data) {
      this.source.FormId = data.FormId == null ? null : data.FormId
      this.source.IsAllowEdit = data.IsAllowEdit
      this.curFormId = data.FormId == null ? this.defFormId : data.FormId
    },
    saveInto(data) {
      this.source = Object.assign(this.source, data)
    },
    fliterEvents(val) {
      return val !== 2 && val !== 4 && val !== 8 && val !== 128
    },
    tabChange(e) {
      if (this.active === 'basic') {
        this.resetBase(this.source)
      }
    },
    save() {
      const that = this
      this.$refs['nodeBasic'].validate((valid) => {
        if (valid) {
          that.set()
        } else {
          return false
        }
      })
    },
    async set() {
      const data = Object.assign({}, this.node)
      let btn = 0
      data.buttons.forEach(c => {
        btn += parseInt(c)
      })
      data.AuditType = 1
      data.AuditButton = btn
      delete data.buttons
      this.initFunc(data)
      const res = await flowNodeApi.Set(this.nodeId, data)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      if (res) {
        this.isRefresh = true
        this.source = Object.assign(this.source, data)
      }
    },
    initFunc(data) {
      this.auditFunc.forEach(c => {
        data[c.key] = data.FuncList.includes(c.key)
      })
      delete data.FuncList
    },
    async reset() {
      this.isRefresh = false
      this.actorIsRefresh = false
      const data = await flowNodeApi.Get(this.nodeId)
      this.active = 'basic'
      data.buttons = []
      if (data.FormId == null) {
        this.curFormId = this.defFormId
      } else {
        this.curFormId = data.FormId
      }
      if (data.AuditButton != null) {
        AuditButton.forEach(c => {
          if ((c.value & data.AuditButton) === c.value) {
            data.buttons.push(c.value)
          }
        })
      }
      this.title = '编辑循环节点：' + data.NodeName
      this.source = data
      this.resetBase(data)
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', {
        isUpdate: this.isRefresh,
        node: this.node,
        showIsUpdate: this.actorIsRefresh,
        show: this.show
      })
    },
    resetForm() {
      this.resetBase(this.source)
    },
    resetBase(data) {
      const funcList = []
      if (data.IsSign) {
        funcList.push('IsSign')
      }
      if (data.IsUpFile) {
        funcList.push('IsUpFile')
      }
      if (data.IsUpFileSign) {
        funcList.push('IsUpFileSign')
      }
      if (data.IsAllowCancel) {
        funcList.push('IsAllowCancel')
      }
      if (data.OpinionMust) {
        funcList.push('OpinionMust')
      }
      this.node = {
        NodeType: data.NodeType,
        NodeName: data.NodeName,
        LimitTime: data.LimitTime,
        TimeOutOpt: data.TimeOutOpt,
        FuncList: funcList,
        ProgressVal: data.ProgressVal,
        BackMethod: data.BackMethod,
        NoticeRange: data.NoticeRange,
        buttons: data.buttons,
        ToEmpId: data.ToEmpId,
        BackNodeId: data.BackNodeId,
        Show: data.Show
      }
    }
  }
}
</script>
